// 这里是导航组件
import React, { Component } from 'react'
import {
    View,
    Text,
    Image,
    ListView,
    TouchableOpacity,
} from 'react-native';

import { M_position_type as styles } from '../../../../styles'     //引入样式完毕

var Dimensions = require('Dimensions');              //获取到当前页面信息               
var { width, height } = Dimensions.get('window');     //页面信息


var w = (width - 40) / 5;

var json = [                                                            //数据
    { name: '电子商务', icon: require('../../../img/postion/icon_1.png') },
    { name: '互联网', icon: require('../../../img/postion/icon_2.png') },
    { name: '网络游戏', icon: require('../../../img/postion/icon_3.png') },
    { name: '计算机软件', icon: require('../../../img/postion/icon_4.png') },
    { name: 'IT服务', icon: require('../../../img/postion/icon_5.png') },
    { name: '计算机硬件', icon: require('../../../img/postion/icon_6.png') },
    { name: '电子技术', icon: require('../../../img/postion/icon_7.png') },
    { name: '网络设备', icon: require('../../../img/postion/icon_8.png') },
    { name: '电信运营', icon: require('../../../img/postion/icon_9.png') },
    { name: '运营管理', icon: require('../../../img/postion/icon_10.png') },
];
var ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });   //ListView数据源

export default class Tpye extends Component {
    constructor(props) {
        super(props);
    };
    static defaultProps = {               //初始化props
        dataSource: ds.cloneWithRows(json),

    };

    render() {
        return (
            <View>
                <ListView
                    dataSource={this.props.dataSource}
                    renderRow={this.renderRow.bind(this)}
                    contentContainerStyle={styles.listViewStyle}        //给设置样式可
                />
            </View>
        )
    }

    renderRow(rowData, sectionId, rowId, highlightRow) {            //没一行都干啥
        return (
            <TouchableOpacity               //事件在这呢
                activeOpacity={0.5}
                onPress={() => { this.goGet('Trade_position', rowData.name) }}
                style={[styles.list, { width: w }]}
            >
                <View style={styles.iconView}>
                    <Image source={rowData.icon} style={styles.img} />
                    <Text style={styles.pt}>{rowData.name}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    goGet(name, rname) {
        this.props.navigation.navigate(name, { rowName: rname });
    }

}
